<template>
    <div class="base">
        <!-- 这里开始绘制挑战开始的图 -->
        <div class="redborder">
            <div class="blueborder">
                <div>
                    <!-- <span class="textclass">挑战开始</span> -->
                    <img class="img_class" src="http://127.0.0.1:8081/StartTitle.jpg">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data:function(){
        return {
            
        }
    }
}
</script>

<style scoped>
.base{
    padding: 10px 5px 10px 20px;
    /* border: 1px solid red; */
}
.redborder{
    width: 60vw;
    height: 10vh;
    border: 4px solid #5994cc;
    transform: skew(-20deg);
}
.blueborder{
    width: 60vw;
    height: 10vh;
    border: 4px solid #c95375;
    position: relative;
    top: 5px;
    left: -15px;
    text-align: center;
    background-color: #380846;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
}
.textclass{
    /* font-size: 7vh;
    color: white;
    font-family: '华文隶书','隶书','宋体','Courier New', Courier, monospace,'微软雅黑' */
}
.img_class{
    width: 90%;
    position: relative;
    margin: 5px 0px;
    transform: skew(20deg)
}
</style>
